<template>
  <div class="searchCar">
    <div class="home-tab">
      <van-nav-bar title="搜索车辆">
        <template #left>
          <span
            style="font-size: 30px; background-color: #06c68a; padding: 4px 0"
            @click="$router.go(-1)"
            class="tc ting-fanhui"
            >返回
          </span>
        </template>
      </van-nav-bar>
    </div>
    <div>
      <van-search
        v-model="params.carNo"
        readonly
        @click="showInput = true"
        show-action
        placeholder="请输入车牌号"
        @search="onSearch"
        @cancel="onCancel"
      />
    </div>

    <div class="home-content">
      <div
        class="home-content-items"
        @click="goCar(item)"
        v-for="(item, index) in carList"
        :key="index"
      >
        <div class="home-content-items-title">{{ item.parkspaceCode }}</div>
        <div v-if="item.carStatus" style="height: 70px">
          <div class="home-content-items-car">
            <div class="car">{{ item.carNo }}</div>
            <div class="card">{{ cardList[item.carType] }}</div>
          </div>
          <div class="home-content-items-time">
            {{ item.parkTime | parkTimeFilter }}
          </div>
        </div>
        <div v-else style="height: 70px; text-align: center; line-height: 70px">
          空车位
        </div>
      </div>
    </div>

    <vnp-keyboard
      @confirm="confirm"
      v-model="params.carNo"
      :show.sync="showInput"
    ></vnp-keyboard>
  </div>
</template>

<script>
import Keyboard from "@/components/vant-number-plate/vnp-keyboard";
import { getPresents } from "@/api/modules/home";

export default {
  name: "searchCar",
  components: {
    "vnp-keyboard": Keyboard,
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfoGetter;
    },
  },
  data() {
    return {
      params: {
        carNo: "",
      },
      showInput: false,
      carList: [],
      cardList: ["小", "中", "大", "新", "特"],
    };
  },
  mounted() {
    if (this.$route.query.carNo) {
      this.params.carNo = this.$route.query.carNo;
      this.confirm();
    }
  },
  methods: {
    goCar(row) {
      if (row.carStatus) {
        this.$router.push({
          path: "/carDetails",
          query: {
            parkspaceCode: row.parkspaceCode,
            roadCode: row.roadCode,
            workstationId: row.workstationId,
            parkingRecordId: row.parkingRecordId,
            carNo: row.carNo,
          },
        });
      } else {
        this.contentRow = row;
        this.scanCode();
      }
    },
    async confirm() {
      this.carList = [];
      const haveData = await getPresents({
        workstationId: this.userInfo.workstationId,
        tollmanId: this.userInfo.id,
      });
      if (haveData.code === 200) {
        haveData.data.roadPresentCars.forEach((item) => {
          item.presentCars.forEach((it) => {
            this.carList.push({
              ...it,
              carStatus: 1,
              roadCode: item.roadCode,
              workstationId: haveData.data.workstationId,
            });
          });
        });

        this.carList = this.carList.sort((a, b) => {
          const aNum = a.parkspaceCode.replace(/[^\d]/g, " ");
          const bNum = b.parkspaceCode.replace(/[^\d]/g, " ");
          return parseInt(aNum) - parseInt(bNum);
        });

        this.carList = this.carList.filter((item) =>
          item.carNo.includes(this.params.carNo)
        );
      }
    },
    onSearch() {},
    onCancel() {},
  },
};
</script>

<style lang="scss">
.searchCar {
  width: 100%;

  .home-content {
    //background: #606266;
    padding: 12px;
    padding-bottom: 100px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .home-content-items {
      width: 46%;
      background: white;
      margin-bottom: 20px;
      border-radius: 10px;
      box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);
      padding: 10px;
      box-sizing: border-box;

      .home-content-items-title {
        font-size: 20px;
      }

      .home-content-items-car {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .car {
          font-weight: bold;
          font-size: 18px;
        }

        .card {
          background: #f3f4f5;
          padding: 1px 4px;
          border-radius: 4px;
          color: var(--theme-color);
        }
      }
    }
  }
}
</style>
